mixin ContactBook
    .role-control(style="margin-top:20px")
        .user-list.option-user
            .list-title
                i.icon-down
                .title-item.all
                    span.title-tab 按照人员选择
                .title-item.dep(style="display:none")
                    span.title-tab 按照部门选择
            .list-wrapper.allUserOption
                if(allUsers.length)
                    each user in allUsers
                        .list-item(data-person-id=user.id data-person-name=user.name) #{user.name}
            .list-wrapper.departmentUserOption(style="display:none")
                .structure
                    ul#tree.ztree(data-node=depAll style="margin-left:0;")
        .role-handle
            button.work-btn.work-btn-default.work-btn-sm#addSelectUser(type='button' data-type='user') 添加>
            br
            button.work-btn.work-btn-default.work-btn-sm#deleteSelectUser(type='button' data-type='user') <删除
        .user-list.select-user
            .list-title
                .title-item
                    span 已选人员
            .list-wrapper.selectedBox
        if(lookUpPersonIds)
            input(type='hidden' id='choosePersonId' value=lookUpPersonIds)
        input#deptIds(type="hidden" value="" name="deptIds")
    .form-control.btn-wrapper(style="text-align:center;")
        button.work-btn.work-btn-default.work-btn-sm.addConfirm(type='button') 保存
        button.work-btn.work-btn-disable.work-btn-sm.addCancel(type='button' style='margin-left:20px') 取消
    script(type='text/javascript' src=__PLUGINS_PATH__ + '/ztree/jquery.ztree.all.min.js')
    script(type='text/javascript').
        //初始化ztree
        zTreeLoad();
        //初始化数据
        $(document).ready(function () {
            var choosePersonId = $('#choosePersonId');
            if (choosePersonId.length) {
                var chooseArr = choosePersonId.val().split(",");
                //先去掉在左边的人
                var chooseNames = [];
                chooseArr.forEach(function (data, index) {
                    var chooseItem = $('.list-wrapper.allUserOption').find("div[data-person-id=" + data + "]");
                    $('.list-wrapper.selectedBox').append(chooseItem.clone().bind('click',clickItem));
                    chooseNames.push(chooseItem.attr("data-person-name"))
                    chooseItem.remove();
                });
                if ($('#approver').length) {
                    $('#approver').val(String(chooseNames));
                } else {
                    console.log("没找到啊")
                }
            }
        });

        $('.list-title i.icon-down').on('click', function () {
            $('.title-item').show()
        })
        $('.title-item').on('click', function () {
            $(this).siblings('.title-item').hide()
            if ($(this).hasClass('all')) {
                $('.allUserOption').show()
                $('.departmentUserOption').hide()
                $('#addSelectUser').attr('data-type', 'user')
                $('#deleteSelectUser').attr('data-type', 'user')
            } else {
                $('.allUserOption').hide()
                $('.departmentUserOption').show()
                $('#addSelectUser').attr('data-type', 'dp')
                $('#deleteSelectUser').attr('data-type', 'dp')
                console.log('异步刷新数');
                zTreeLoad();
            }
        });
        var clickItem = function () {
            $('.list-item').on('click', function () {
                $('.list-item').removeClass("active");
                $(this).addClass("active");
            });
        };

        clickItem();

        function changeIdTo(id, changeType) {
            var deptIds = $('#deptIds').val().split(',');
            var index = $.inArray('user_' + id, deptIds);
            if (changeType === 'add') {
                if (index === -1) {
                    deptIds.push('user_' + id);
                }
            } else {
                if (index !== -1) {
                    deptIds.splice(index, 1);
                }
            }
            $('#deptIds').val(String(deptIds));
        }

        function changeSelectByTree(changeType) {
            var selectIds = $('#deptIds').val().split(",");
            console.log(selectIds);
            if (changeType === 'add') {
                selectIds.forEach(function (data, index) {
                    var sid = data.split("user_")[1];
                    var chooseItem = $('.list-wrapper').find(".list-item[data-person-id=" + sid + "]");
                    if (!chooseItem.parent().hasClass('selectedBox')) {
                        $('.list-wrapper.selectedBox').append(chooseItem.clone().bind('click', clickItem));
                        chooseItem.remove();
                    }
                });
            } else {
                //删除掉改ID的人员,将人员填会到allUserOption,同时修改deptIds,刷新树
                var selectedList = $('.list-wrapper.selectedBox').find(".list-item.active");
                var selectId = selectedList.attr("data-person-id");
                if (selectId) {
                    changeIdTo(selectId, 'remove');
                    zTreeLoad();
                    //将选中的返回去
                    $('.list-wrapper.allUserOption').append(selectedList.clone().bind('click', clickItem));
                    selectedList.remove();
                } else {
                    layerAlert('获取选中人员失败', 'error');
                }
            }
        }

        $('#addSelectUser').click(function () {
            if ($(this).attr('data-type') == 'user') {
                var selectList = $('.list-wrapper.allUserOption').find('.list-item.active');
                if (selectList.length == 0) {
                    layerAlert('请选选择要添加的人', 'error');
                } else {
                    selectList = selectList.removeClass("active");
                    changeIdTo(selectList.attr('data-person-id'), 'add');
                    $('.selectedBox').append(selectList);
                }
            } else {
                var selectDPUsers = $('#deptIds').val();
                if (selectDPUsers === "") {
                    layerAlert('请选选择要添加的人', 'error');
                } else {
                    console.log("从树添加人");
                    changeSelectByTree('add');
                }
            }
        });

        $('#deleteSelectUser').click(function () {
            if ($(this).attr('data-type') == 'user') {
                var selectedList = $('.list-wrapper.selectedBox').find(".list-item.active");
                if (selectedList.length == 0) {
                    layerAlert('请选选择要删除的人', 'error');
                } else {
                    selectedList = selectedList.removeClass("active");
                    changeIdTo(selectedList.attr('data-person-id'), 'remove');
                    $('.list-wrapper.allUserOption').append(selectedList);
                }
            } else {
                var selectedList = $('.list-wrapper.selectedBox').find(".list-item.active");
                if (selectedList.length === 0) {
                    layerAlert('请选选择要删除的人', 'error');
                } else {
                    changeSelectByTree('remove');
                }
            }

        });

        $('.close-node').on('click', function (e) {
            if ($(this).hasClass('open-node')) {
                $(this).removeClass('open-node').addClass('close-node').find('ul').first().hide()
            } else {
                $(this).removeClass('close-node').addClass('open-node').find('ul').first().show()
            }
            $('.structure').find('li').removeClass('selectDP');
            $(this).addClass('selectDP');
            e.stopPropagation();//阻止冒泡
        });


        $('.addCancel').on('click', function () {
            layerCloseAll();
        })

        $('.addConfirm').on('click', function () {
            $('input[name="choosePersonId"]').remove();
            var personIDs = $('.selectedBox').find(".list-item");
            var personIDArr = [];
            var chooseNameArr = [];
            console.log(personIDs);
            for (var i = 0; i < personIDs.length; i++) {
                console.log(personIDs[i])
                var personID = personIDs[i].getAttribute("data-person-id");
                var personName = personIDs[i].getAttribute("data-person-name");
                personIDArr.push(personID);
                chooseNameArr.push(personName);
            }
            var choosePersonId = $('#choosePersonId');
            if (choosePersonId.length) {
                choosePersonId.val(String(personIDArr));
            } else {
                $('body').append('<input type="hidden" id="choosePersonId" value="' + String(personIDArr) + '"/>');
            }
            if ($('#approver').length) {
                $('#approver').val(String(chooseNameArr));
            } else {
                console.log("没找到啊")
            }
            layerCloseAll();
        })
